<template>
  <section class="form_content">
    <el-form :inline="true" :model="formSearch" class="form_inline">
      <!-- <el-form-item label="所属组织" size="small">
        <el-cascader
          ref="cascader"
          v-model="option1"
          :options="zuzhiTree"
          :props="defaultProps2"
          @change="zuzhiChange"
          clearable
        >
        </el-cascader>
      </el-form-item> -->
    </el-form>
    <el-form :inline="true" :model="formSearch">
      <el-form-item label="选择项目" size="small" prop="projectId">
        <el-select v-model="formSearch.projectId" placeholder="请选择项目">
          <el-option
            v-for="item in xqTree"
            :label="item.name"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="搜索区域" size="small">
        <el-input v-model="formSearch.name"></el-input>
      </el-form-item>

      <el-form-item size="small" v-if="$root.btnControl.find(item => item == 'view')">
        <el-button size="small" @click="getlist">查 询</el-button>
      </el-form-item>
      <el-form-item size="small" v-if="$root.btnControl.find(item => item == 'add')">
        <el-button
          size="small"
          @click="
            addDialog = true;
            parentName = '无';
          "
          >添 加</el-button
        >
      </el-form-item>
      <el-form-item size="small" v-if="$root.btnControl.find(item => item == 'delete')">
        <el-button size="small" type="danger" @click="deleInfor(false)"
          >批量删除</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 面包屑 -->
    <div class="show_father">
      <div class="show_father_box">
        <div
          style="cursor: pointer;"
          v-for="(item, index) in fatherName"
          :key="index"
          @click="clickmbx(item.id)"
        >
          <span>{{ item.name }} </span>
          <span
            v-if="index != fatherName.length - 1"
            style="margin-right:10px;"
          >
            →
          </span>
        </div>
      </div>
      <el-button
        size="small"
        @click="(fatherName = [{ id: 0, name: '首级' }]), clickmbx(0)"
        >清除记录</el-button
      >
    </div>
    <!-- 表格 -->
    <el-table
      :data="formData"
      stripe
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <!-- <el-table-column width="25">
        <template slot-scope="scope">
          <el-radio @change='pname = scope.row.name,isGetFather = true' :disabled="scope.row.id==formUpdate.id" v-model="formUpdate.pid" :label="scope.row.id" style="color:transparent;"></el-radio>
				</template>
			</el-table-column> -->
      <el-table-column prop="id" label="区域编号"></el-table-column>
      <el-table-column prop="name" label="区域">
        <template slot-scope="scope">
          <div style="cursor: pointer;">{{ scope.row.name }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="备注"></el-table-column>
      <el-table-column
        prop="updateTime"
        label="操作时间"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="pname"
        label="父级区域"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="projectName"
        label="所属项目"
        width="180"
      ></el-table-column>
      <el-table-column label="操作" fixed="right" width="350">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="addChildren(scope.row)"
            v-if="$root.btnControl.find(item => item == 'add')"
            >添加子集</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="handleclick(scope.row)"
            v-if="$root.btnControl.find(item => item == 'view')"
            >查看子集</el-button
          >
          <el-button
            type="warning"
            size="small"
            @click="updateShowBox(scope.row)"
            v-if="$root.btnControl.find(item => item == 'edit')"
            >修 改</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="deleInfor(scope.row.id)"
            v-if="$root.btnControl.find(item => item == 'delete')"
            >删 除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <paging @changePage="handleCurrentPage" :get-total="total"></paging>

    <!-- 添加 -->
    <el-dialog
      title="新增"
      :visible.sync="addDialog"
      :close-on-click-modal="false"
      @close="addDialogClose"
    >
      <div class="cont_box_right">
        <el-form
          label-position="right"
          :rules="rules"
          label-width="100px"
          :model="formPush"
          ref="addList"
        >
          <!-- <el-form-item label="当前所在层级" prop="">
            <div class="show_father_box">
              <div
                style="cursor: pointer;"
                v-for="(item, index) in fatherName"
                :key="index"
              >
                <span>{{ item.name }} </span>
                <span
                  v-if="index != fatherName.length - 1"
                  style="margin-right:10px;"
                >
                  →
                </span>
              </div>
            </div>
          </el-form-item> -->
          <el-form-item label="父级:" prop="">
            <div style="margin-top:15px;">{{ parentName }}</div>
          </el-form-item>
          <el-form-item label="区域名称" prop="name">
            <el-input v-model="formPush.name"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="formPush.description"></el-input>
          </el-form-item>
          <el-form-item label="选择项目" size="small" prop="projectId">
            <el-select v-model="formPush.projectId" placeholder="请选择项目">
              <el-option
                v-for="item in xqTree"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium " @click="addDialog = false">取 消</el-button>
        <el-button size="medium " @click="addList('addList')">新 增</el-button>
      </div>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog
      title="修改"
      :visible.sync="updateDialog"
      :close-on-click-modal="false"
    >
      <div class="cont_box_right">
        <el-form
          label-position="right"
          :rules="rules"
          label-width="100px"
          :model="formUpdate"
          ref="addList"
        >
          <el-form-item label="当前父级">
            <div style="margin-top:15px;">{{ pname }}</div>
          </el-form-item>
          <el-form-item label="区域名称" prop="name">
            <el-input v-model="formUpdate.name"></el-input>
          </el-form-item>
          <!-- <el-form-item label="选择项目" size="small" prop="projectId">
            <el-select v-model="formUpdate.projectId" placeholder="请选择项目">
              <el-option v-for="item in xqTree" :label="item.name" :value="item.id" :key="item.id"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="备注">
            <el-input v-model="formUpdate.description"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="updateDialog = false">取 消</el-button>
        <el-button size="medium" @click="updateList">确定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import paging from "../paging";
import {
  sectionList,
  sectionAddList,
  sectionUpdateList,
  sectionDeleteList,
  xqSelectList,
  orgTree
} from "../../url/api";
import { log } from "three";
export default {
  data() {
    return {
      option1: [],
      deleBatch: [], //批量删除
      pname: "", //当前选中的父级
      isGetFather: false, //是否已经选中父级
      fatherId: 0,
      formSearch: {
        //查询条件
        current: 1,
        projectId: "",
        pid: 0,
        size: 10
      },
      fatherName: [{ id: 0, name: "首级" }], //用于修改pid和相关操作,//子区域的父级
      parentId: 0, //父级id  只在点击添加子集时会赋值
      parentName: "",
      formPush: {}, //表单提交
      formData: [], //数据
      formUpdate: {}, //修改表单
      total: 0, //数据总数
      pages: 0, //页面总数
      addDialog: false,
      updateDialog: false,
      zuzhiTree: [],
      xqTree: [],
      dataTree: [],
      defaultProps: {
        //树状图key定义
        children: "children",
        label: "label"
      },
      defaultProps2: {
        children: "children",
        label: "name",
        value: "id",
        expandTrigger: "hover",
        checkStrictly: true
      },
      rules: {
        name: [{ required: true, message: "该项不能为空" }],
        projectId: [
          { required: true, message: "该项不能为空", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    getlist() {
      sectionList(this.formSearch).then(res => {
        console.log(res);
        if (res.data.ok) {
          this.formData = res.data.data.records.filter(item => {
            if (item.updateTime) {
              item.updateTime = this.$root.getDateArray(item.updateTime)[9];
            }
            return item;
          });
          this.total = res.data.data.total*1;
          this.pages = res.data.pages*1;
        } else {
          this.$message(res.data.msg);
        }
      });
    },
    getInit() {
      //初始化列表

      let org_tree1 = {};
      xqSelectList(org_tree1).then(res => {
        //项目选择列表
        console.log(res);
        if (res.data.ok) {
          this.xqTree = res.data.data;
          this.formSearch.projectId = this.xqTree[0] ? this.xqTree[0].id : 0;
          this.getlist();
        }
      });
      let org_tree = {
        name: "",
        status: 1
      };
      orgTree(org_tree).then(res => {
        //获取组织列表
        console.log(res);
        if (res.data.ok) {
          this.zuzhiTree = res.data.data;
        }
      });
    },
    addDialogClose() {
      this.$nextTick(() => {
        Object.keys(this.formPush).forEach(item => {
          this.formPush[item] = "";
        });
      });
    },
    addChildren(item) {
      this.addDialog = true;
      this.parentId = item.id;
      this.parentName = item.name;
    },
    addList() {
      //添加
      this.formPush.pid = this.parentId + "";
      this.$refs[`addList`].validate(valid => {
        if (valid) {
          sectionAddList(this.formPush).then(res => {
            if (res.data.ok) {
              this.$message({
                message: "添加成功",
                type: "success"
              });
              this.getlist();
            } else {
              this.$message("添加失败");
            }
            this.addDialog = false;
            // 重置为0
            this.parentId = 0 + "";
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    updateShowBox(item) {
      console.log("点击修改的item", item);
      //修改东西弹窗
      if (!this.isGetFather) {
        if (item.pname) {
          this.pname = item.pname;
        } else {
          this.pname = item.name;
        }
      }
      let obj = {
        id: item.id,
        name: item.name,
        pid: item.pid,
        description: item.description,
        projectId: item.projectId
      };
      this.pname = item.pname || "无";
      this.updateDialog = true;
      this.formUpdate = obj;
    },
    updateList() {
      //修改
      console.log("修改时的参数", this.formUpdate);
      sectionUpdateList(this.formUpdate).then(res => {
        if (res.data.ok) {
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.getlist();
        }
      });
      this.updateDialog = false;
    },
    deleInfor(ids) {
      //删除
      let arrId = [];
      if (ids) {
        arrId.push(ids);
      } else {
        if (this.deleBatch.length != 0) {
          this.deleBatch.filter(item => {
            arrId.push(item.id);
            return item;
          });
        }
      }
      this.$confirm("确认删除吗？")
        .then(_ => {
          sectionDeleteList(arrId).then(res => {
            console.log(res);
            if (res.data.ok) {
              this.$message.success("删除成功");
              this.getlist();
            }
          });
        })
        .catch(_ => {});
    },
    handleCurrentPage(val) {
      //页码改变
      this.formSearch.current = val;
      this.getlist();
    },
    checkTreeInfor(data, ev) {
      //监听树状图勾选
      // console.log(ev);
      if (ev.checkedKeys.length > 1) {
        this.$message("只能选择一个组织");
      } else {
        this.formPush.projectId = ev.checkedKeys[0];
        this.formUpdate.projectId = ev.checkedKeys[0];
      }
    },

    zuzhiChange(value) {
      //改变组织
      this.$refs.cascader.dropDownVisible = false;
      if (value.length != 0) {
        console.log(value);
        this.formSearch.orgId = this.$refs.cascader.getCheckedNodes()[0].data.id;
        console.log(this.formSearch.orgId);
      } else {
        this.formSearch.orgId = "";
      }
      sectionList(this.formSearch).then(res => {
        console.log(res);
        if (res.data.ok) {
          this.formData = res.data.data.records.filter(item => {
            if (item.updateTime) {
              item.updateTime = this.$root.getDateArray(item.updateTime)[9];
            }
            return item;
          });
          this.total = res.data.data.total;
          this.pages = res.data.pages;
        } else {
          this.$message(res.data.msg);
        }
      });
    },
    handleSelectionChange(val) {
      //多选
      console.log(val);
      this.deleBatch = val;
    },
    handleclick(event) {
      //点击表格
      this.formSearch.current = 1;
      this.fatherName = this.fatherName.filter(item => {
        return item.id != event.id;
      });
      this.fatherName.push(event);

      this.formSearch.pid = event.id;
      console.log(this.fatherName, event);

      sectionList(this.formSearch).then(res => {
        console.log(res);
        if (res.data.ok) {
          this.formData = res.data.data.records.filter(item => {
            if (item.updateTime) {
              item.updateTime = this.$root.getDateArray(item.updateTime)[9];
            }
            return item;
          });
          this.total = res.data.data.total;
          this.pages = res.data.pages;
        } else {
          this.$message(res.data.msg);
        }
      });
    },
    clickmbx(event) {
      //点击面包屑
      console.log(event);
      this.formSearch.current = 1;
      this.formSearch.pid = event;
      sectionList(this.formSearch).then(res => {
        console.log(res);
        if (res.data.ok) {
          this.formData = res.data.data.records.filter(item => {
            if (item.updateTime) {
              item.updateTime = this.$root.getDateArray(item.updateTime)[9];
            }
            return item;
          });
          this.total = res.data.data.total;
          this.pages = res.data.pages;
        } else {
          this.$message(res.data.msg);
        }
      });
    }
  },
  mounted() {
    this.getInit();
  },
  components: {
    paging
  }
};
</script>
<style scoped>
.cont_box {
  width: 100%;
  display: flex;
}
.cont_box_left,
.cont_box_right {
  flex: 1;
  background: transparent;
  padding: 10px;
}
.cont_box_left {
  margin-right: 10px;
}
.margin10 {
  margin-bottom: 10px;
}
.marginRight {
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.cont_box_right .el-form-item {
  margin-bottom: 20px;
}
.table_row {
  color: #a1d6f4;
  width: 100%;
  font-size: 16px;
}
.show_father {
  height: 50px;
  color: #a1d6f4;
  border: 1px solid #a1d6f4;
  padding: 0 10px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}
.show_father_box {
  display: flex;
  align-items: center;
  flex: 1;
}
</style>
